<script setup lang="ts">
import { ref } from 'vue';

const isShow = ref(false)
 const task = ()=>{
  isShow.value=! isShow.value
 }
</script>

<template>
  <div class="app-page">
    <button @click="task" >切换</button>
    <div v-show="isShow"class="box1">V-SHOW</div>
    <div v-if="isShow" class="box2">V-IF</div>
  </div>
</template>

<style lang="css" scoped>
.box1{
  width: 200px;
  height: 200px;
  background-color: pink;
}
.box2{
  width: 200px;
  height: 200px;
  background-color: green;
}
</style>
